<nz-card>
  <p class="edit-title">
    基础信息
  </p>
  <div class="edit-control">
    <nz-form-item *ngIf="detailsData.allocationNumber">
      <nz-form-label [nzFlex]="flexLabelWidth">调拨单号</nz-form-label>
      <nz-form-control nzFlex="420px">
        <input
          nz-input
          disabled
          placeholder="调拨单号"
          [(ngModel)]="detailsData.allocationNumber"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>出库仓库</nz-form-label>
      <nz-form-control nzFlex="420px">
        <nz-select
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="请选择出库仓库"
          [(ngModel)]="formParams.deliveryWhId">
          <nz-option
            *ngFor="let option of storeOptions"
            [nzLabel]="option.name"
            [nzValue]="option.id"
          ></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>入库仓库</nz-form-label>
      <nz-form-control nzFlex="420px">
        <nz-select
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="请选择入库仓库"
          [(ngModel)]="formParams.warehousingWhId">
          <nz-option
            *ngFor="let option of storeOptions"
            [nzLabel]="option.name"
            [nzValue]="option.id"
          ></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="flexLabelWidth">备注</nz-form-label>
      <nz-form-control nzFlex="420px">
        <nz-textarea-count [nzMaxCharacterCount]="1000">
          <textarea
            rows="4"
            nz-input
            maxlength="1000"
            placeholder="仅内部可见"
            [(ngModel)]="formParams.remark"
          ></textarea>
        </nz-textarea-count>
      </nz-form-control>
    </nz-form-item>
  </div>

  <nz-divider></nz-divider>

  <p class="edit-title">
    调拨明细
    <button
      nz-button
      nzType="primary"
      nzSize="small"
      class="m-l-10"
      (click)="showMoreGoodsModal()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      选择更多商品
    </button>
  </p>
  <div class="edit-control">
    <nz-table
      #mxTable
      nzBordered
      nzSize="small"
      [nzFrontPagination]="false"
      [nzShowPagination]="false"
      [nzData]="associatedTableData">
      <thead>
        <tr>
          <th nzAlign="center" rowspan="2" nzWidth="70px">序号</th>
          <th nzAlign="center" colspan="4">商品信息</th>
          <th nzAlign="center" colspan="2">调出信息</th>
          <th nzAlign="center" rowspan="2">操作</th>
        </tr>
        <tr>
          <th nzAlign="center">商品状态</th>
          <th nzAlign="center">商品名称</th>
          <th nzAlign="center">商品编号</th>
          <th nzAlign="center">商品69码</th>
          <th nzAlign="center"><span class="required-th-sp p-r-8">*</span>预计调出数量</th>
          <th nzAlign="center"><span class="required-th-sp p-r-8">*</span>调出品质</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of mxTable.data; let index = index;">
          <!-- 序号 -->
          <td nzAlign="center">{{ index + 1 }}</td>
          <!-- 商品状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : '#67C23A'}">
              {{ data.whGoodsState === 0 ? '禁用' : (data.whGoodsState === 1 ? '启用' : '') }}
            </span>
          </td>
          <!-- 商品名称 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
              {{ data.whGoodsName || '-' }}
            </span>
          </td>
          <!-- 商品编号 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
              {{ data.whGoodsCode || '-' }}
            </span>
          </td>
          <!-- 商品69码 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
              {{ data.whGoodsTwoCode || '-' }}
            </span>
          </td>
          <!-- * 预计调出数量 -->
          <td nzAlign="center">
            <nz-input-number
              style="width: 120px;"
              [nzMin]="1"
              [nzMax]="99999"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="data.deliveryNumber"
            ></nz-input-number>
          </td>
          <!-- 调出品质 -->
          <td nzAlign="center">
            <nz-select
              style="width: 200px;"
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择品质"
              [(ngModel)]="data.deliveryQuality">
              <nz-option nzLabel="不良品" [nzValue]="0"></nz-option>
              <nz-option nzLabel="良品" [nzValue]="1"></nz-option>
            </nz-select>
          </td>
          <!-- 操作 -->
          <td nzAlign="center">
            <button
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              (click)="deleteGoodItem(data)">
              <i nz-icon nzType="delete" nzTheme="outline"></i>
            </button>
          </td>
        </tr>

        <tr
          *ngIf="associatedTableData?.length"
          style="background: #fafafa; font-weight: 600;"
        >
          <td nzAlign="center" colSpan="5">合计</td>
          <td nzAlign="center">{{ calcSumTotal('deliveryNumber') }}</td>
          <td nzAlign="center">
            <nz-select
              style="width: 200px;"
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="批量选择品质"
              ngModel
              (ngModelChange)="batchSelectQuality($event)">
              <nz-option nzLabel="不良品" [nzValue]="0"></nz-option>
              <nz-option nzLabel="良品" [nzValue]="1"></nz-option>
            </nz-select>
          </td>
          <td nzAlign="center">-</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      nz-button
      nzType="primary"
      class="m-r-10"
      [nzLoading]="submitLoading"
      (click)="submitData()"
    >保存</button>

    <button
      nz-button
      nzType="default"
      (click)="pageBack()"
    >返回</button>
  </div>
</nz-card>

<!-- S 选择商品 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [nzWidth]="1200"
  [(nzVisible)]="isGoodVisible"
  [nzTitle]="'选择商品'"
  (nzOnCancel)="isGoodVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="good-modal-tp">
        <div class="common-search-wrap">
          <div class="common-search-forms">
            <div class="common-form-item">
              <label class="common-search-label">商品</label>
              <div class="common-search-conrol">
                <input
                  nz-input
                  placeholder="编码/69码/名称"
                  [(ngModel)]="goodTableParams.code"
                />
              </div>
            </div>

            <div class="common-form-item">
              <div class="common-search-conrol">
                <button
                  nz-button
                  nzType="primary"
                  class="m-r-8"
                  (click)="searchGoodsData()"
                >查询</button>

                <button
                  nz-button
                  nzType="default"
                  class="m-r-8"
                  (click)="resetGoodsData()"
                >重置</button>

                <button
                  nz-button
                  nzType="primary"
                  (click)="relationSelected()"
                >关联已选商品 {{ setOfCheckedId.size }}</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="p-t-10">
        <nz-table
          #spTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="goodTableParams.loading"
          [nzData]="goodTableParams.tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="goodTableParams.total"
          [nzPageIndex]="goodTableParams.page"
          [nzPageSize]="goodTableParams.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
          (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
        >
          <thead>
            <tr>
              <th
                nzWidth="50px"
                [(nzChecked)]="checked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="onAllChecked($event)"
              ></th>
              <th nzAlign="center">商品编号</th>
              <th nzAlign="center">商品名称</th>
              <th nzAlign="center">69码</th>
              <th nzAlign="center">良品总库存</th>
              <th nzAlign="center">不良品总库存</th>
              <th nzAlign="center">状态</th>
              <th nzAlign="center">操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of spTable.data; let index = index;">
              <td
                [nzDisabled]="data.state === 0"
                [nzChecked]="setOfCheckedId.has(data.id)"
                (nzCheckedChange)="onItemChecked(data.id, $event)"
              ></td>
              <!-- 商品编号 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.state === 0 ? '#999999' : ''}">
                  {{ data.goodsCode || '-' }}
                </span>
              </td>
              <!-- 商品名称 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.state === 0 ? '#999999' : ''}">
                  {{ data.name || '-' }}
                </span>
              </td>
              <!-- 69码 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.state === 0 ? '#999999' : ''}">
                  {{ data.code || '-' }}
                </span>
              </td>
              <!-- 良品总库存 -->
              <td nzAlign="center">{{ data.goodStock || '0' }}</td>
              <!-- 不良品总库存 -->
              <td nzAlign="center">{{ data.noGoodStock || '0' }}</td>
              <!-- 状态 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.state === 0 ? '#999999' : '#67C23A'}">
                  {{ data.state === 0 ? '禁用' : (data.state === 1 ? '启用' : '') }}
                </span>
              </td>
              <!-- 操作 -->
              <td nzAlign="center">
                <ng-container *ngIf="data.bomList != '[]' && data.bomList != '' && data.state === 1; else elseTemplate">
                  <button
                    nz-button
                    nzType="link"
                    nzSize="small"
                    (click)="showBomModal(data)"
                  >选择BOM</button>
                </ng-container>
                <ng-template #elseTemplate>
                  -
                </ng-template>
              </td>
            </tr>
          </tbody>
        </nz-table>

        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </div>
  </div>
</nz-modal>
<!-- S 选择商品 -->

<!-- BOM选择 -->
<storage-select-bom
  [(ngModel)]="isBomVisible"
  [goodsId]="bomGoodsId"
  (onBomConfirm)="bomHandle($event)"
></storage-select-bom>

